<template>
  <div class="homeborder">
    <div class="query-search">
      <div class="search">
        <div class="search-item">
          <div class="title">用户名</div>
          <a-input
            v-model:value="username"
            style="width: 500px"
            class="a-inp"
            placeholder="请输入用户名"
          />
        </div>
        <div class="search-item">
          <div class="title">操作状态码</div>
          <a-input
            v-model:value="operationstatuscode"
            style="width: 500px"
            class="a-inp"
            placeholder="请输入操作状态码"
          />
        </div>
        <div class="search-item">
          <div class="title">操作时间</div>
          <a-input
            v-model:value="operationtime"
            style="width: 500px"
            class="a-inp"
            placeholder="请输入操作时间"
          />
        </div>
        <div class="search-item">
          <div class="title">操作IP</div>
          <a-input
            v-model:value="operationip"
            style="width: 500px"
            class="a-inp"
            placeholder="请输入操作IP"
          />
        </div>
      </div>
      <div class="search-btn">
        <a-button type="primary" class="search-btn-item" ghost>搜索</a-button>
        <a-button class="search-btn-item">重置</a-button>
      </div>
    </div>

    <div class="tcontents">
      <a-table
        :columns="columns"
        :data-source="data"
        :pagination="{ pageSize: 6 }"
      />
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, watch } from "vue";
const username = ref("");
const operationstatuscode = ref("");
const operationtime = ref("");
const operationip = ref("");

watch(username, () => {
  console.log(username.value);
});
import { useRouter } from "vue-router"; // 引入 useRouter
// 这是一集级视图查看详情

const columns = [
  {
    title: "用户名",
    dataIndex: "username",
  },
  {
    title: "角色",
    dataIndex: "role",
  },
  {
    title: "操作状态码",
    dataIndex: "operationstatuscode",
  },
  {
    title: "操作时间",
    dataIndex: "operationtime",
  },

  {
    title: "操作IP",
    dataIndex: "operationip",
  },
  {
    title: "操作body",
    dataIndex: "operationbody",
  },
  {
    title: "操作query",
    dataIndex: "operationquery",
  },
];
const data = [
  {
    key: 1,
    username: "王超",
    role: "管理员",
    operationstatuscode: "134122",
    operationtime: "2023-12-03 11:09:09",
    operationip: "192.160.14.13",
    operationbody: "body",
    operationquery: "index=1?id=2",
  },
  {
    key: 2,
    username: "王超",
    role: "管理员",
    operationstatuscode: "134122",
    operationtime: "2023-12-03 11:09:09",
    operationip: "192.160.14.13",
    operationbody: "body",
    operationquery: "index=1?id=2",
  },
  {
    key: 3,
    username: "王超",
    role: "管理员",
    operationstatuscode: "134122",
    operationtime: "2023-12-03 11:09:09",
    operationip: "192.160.14.13",
    operationbody: "body",
    operationquery: "index=1?id=2",
  },
  {
    key: 4,
    username: "王超",
    role: "管理员",
    operationstatuscode: "134122",
    operationtime: "2023-12-03 11:09:09",
    operationip: "192.160.14.13",
    operationbody: "body",
    operationquery: "index=1?id=2",
  },
  {
    key: 5,
    username: "王超",
    role: "管理员",
    operationstatuscode: "134122",
    operationtime: "2023-12-03 11:09:09",
    operationip: "192.160.14.13",
    operationbody: "body",
    operationquery: "index=1?id=2",
  },
  {
    key: 6,
    username: "王超",
    role: "管理员",
    operationstatuscode: "134122",
    operationtime: "2023-12-03 11:09:09",
    operationip: "192.160.14.13",
    operationbody: "body",
    operationquery: "index=1?id=2",
  },
  {
    key: 7,
    username: "王超",
    role: "管理员",
    operationstatuscode: "134122",
    operationtime: "2023-12-03 11:09:09",
    operationip: "192.160.14.13",
    operationbody: "body",
    operationquery: "index=1?id=2",
  },
  {
    key: 8,
    username: "王超",
    role: "管理员",
    operationstatuscode: "134122",
    operationtime: "2023-12-03 11:09:09",
    operationip: "192.160.14.13",
    operationbody: "body",
    operationquery: "index=1?id=2",
  },
];
</script>
<style scoped>
.homeborder {
  width: 95%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
  margin-left: 1%;
}
.tcontents {
  width: 86%;
}
.search {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
  padding: 0;
  width: 100%;
  flex-wrap: wrap;
}
.search-item {
  display: flex;
  width: 46%;
  height: 35px;
  padding: 0;
  margin: 5px;
}
.title {
  width: 100px;
  line-height: 25px;
  text-align: center;
  border: 1px solid #d9d9d9;
  background-color: #f8fafb;
  padding: 5px;
}
.a-inp {
  border-radius: 3px;
}
.query-search {
  background-color: #fafafa;
  width: 86%;
  height: 140px;
  margin-bottom: 10px;
}
.search-btn {
  display: flex;
  margin-left: 26px;
}
.search-btn-item {
  margin: 0 5px;
}
</style>
